<template>
  <div class="w-full h-full flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
    <div class="w-full h-full bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
      <!-- 错误标题区 -->
      <div class="bg-gradient-to-r from-red-500 to-orange-500 p-5 flex items-center">
        <div class="bg-white/20 p-2 rounded-full mr-3">
          <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
          </svg>
        </div>
        <h1 class="text-2xl font-bold text-white">
          {{ error.statusCode }} {{ statusMessage }}
        </h1>
      </div>

      <!-- 错误详情区 - 始终显示且可滚动 -->
      <div class="p-5">
        <div class="mb-6">
          <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200 mb-2">错误信息</h2>
          <p class="text-gray-600 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 p-3 rounded-lg">
            {{ error.message }}
          </p>
        </div>

        <!-- 完整错误堆栈 - 强制显示且可滚动 -->
        <div class="mb-6">
          <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200 mb-2">完整错误详情</h2>
          <pre
            class="text-sm text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 p-4 rounded-lg overflow-x-auto max-h-[50vh]">{{ fullErrorDetails }}</pre>
        </div>

        <!-- 操作按钮 -->
        <div class="flex flex-wrap gap-3">
          <button @click="handleError"
            class="flex-1 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition">
            返回首页
          </button>
          <button v-if="error.statusCode !== 404" @click="retry"
            class="flex-1 py-3 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg transition">
            重新加载
          </button>
          <button @click="goBack" class="flex-1 py-3 bg-amber-500 hover:bg-amber-600 text-white rounded-lg transition">
            返回上一页
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const props = defineProps({
  error: Object
})

const route = useRoute()
const router = useRouter()

// 自动匹配状态消息
const statusMessage = computed(() => {
  return props.error.statusMessage ||
    (props.error.statusCode === 404 ? '页面未找到' :
      props.error.statusCode === 500 ? '服务器错误' : '应用程序错误')
})

// 完整错误详情（始终显示）
const fullErrorDetails = computed(() => {
  let details = `╔═══════════════════════════════╗\n`
  details += `║       错误诊断信息             ║\n`
  details += `╚═══════════════════════════════╝\n\n`
  details += `► 状态码: ${props.error.statusCode}\n`
  details += `► 消息: ${props.error.message}\n`
  details += `► 路径: ${route.fullPath}\n`

  if (props.error.statusMessage) {
    details += `► 状态消息: ${props.error.statusMessage}\n`
  }

  if (props.error.url) {
    details += `► 请求URL: ${props.error.url}\n`
  }

  if (props.error.stack) {
    details += `\n══ 堆栈跟踪 ═══════════════════\n${props.error.stack}`
  }

  if (props.error.data) {
    details += `\n══ 附加数据 ═══════════════════\n${JSON.stringify(props.error.data, null, 2)}`
  }

  return details
})

// 操作函数
const handleError = () => clearError({ redirect: '/' })
const retry = () => clearError({ redirect: route.fullPath })
const goBack = () => window.history.length > 1 ? router.go(-1) : handleError()
</script>

<style scoped>
/* 移动端优化 */
@media (max-width: 640px) {
  .flex-wrap {
    flex-direction: column;
  }
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
  .bg-gray-100 {
    background-color: #2d3748;
  }
}

/* 滚动条美化 */
pre::-webkit-scrollbar {
  height: 8px;
  background-color: #f5f5f5;
}

pre::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 4px;
}

.dark pre::-webkit-scrollbar-thumb {
  background: #4a5568;
}
</style>